<template>
  <a-form ref="userInfoFormRef" :rules="userInfoRules" :model="userInfoForm" @submit="handleSubmit">
    <a-form-item
      v-for="(item, index) in userInfoList"
      :key="index"
      :field="item.field"
      :label="item.label"
      :required="item.required"
      :validate-trigger="['blur']"
    >
      <a-input v-if="item.isInput" v-model="userInfoForm[item.field]" :placeholder="item.placeholder" />
      <a-radio-group v-if="item.isRadio" v-model="userInfoForm.sex">
        <a-radio value="0">男</a-radio>
        <a-radio value="1">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item>
      <a-space :size="30">
        <a-button type="primary" @click="save">保存</a-button>
        <a-button type="primary" status="danger" @click="close">关闭</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script>
import importConfig from './userInfo.ts';
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  name: 'UserInfo',
  props: {
    user: {
      type: Object,
      default: null,
    },
  },
  setup(props) {
    const { base, userInfoForm, userInfoRules, userInfoList, save, close } = importConfig(props);

    return {
      ...toRefs(base),
      userInfoForm,
      userInfoRules,
      userInfoList,
      save,
      close,
    };
  },
});
</script>

<style scoped></style>
